<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市探店 - 优化版</title>
    <script src="../static/js/echart.min.js"></script>
    <link rel="stylesheet" href="../static/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding-bottom: 90px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            width: 100%;
        }

        header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            margin-bottom: 25px;
            width: 100%;
        }

        h1 {
            font-size: 1.8rem;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .subtitle {
            font-size: 1rem;
            opacity: 0.9;
            margin-bottom: 15px;
        }

        .search-box {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 30px;
            padding: 10px 20px;
            margin: 15px auto;
            width: 90%;
            max-width: 600px;
            display: flex;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            padding: 10px;
            font-size: 1rem;
            background: transparent;
        }

        .search-box i {
            color: #6a11cb;
            font-size: 1.2rem;
            cursor: pointer;
        }

        /* 主要内容区域 - 左右布局 */
        .main-content {
            display: flex;
            gap: 25px;
            margin-bottom: 25px;
        }

        /* 左侧内容 - 探店主题 */
        .left-panel {
            flex: 1.2;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        /* 右侧内容 - 地图 */
        .right-panel {
            flex: 0.8;
        }

        /* 主题选择区域 */
        .theme-section {
            background: white;
            border-radius: 18px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.06);
        }

        .section-title {
            font-size: 1.2rem;
            color: #2c3e50;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            font-weight: 600;
        }

        .section-title i {
            margin-right: 10px;
            color: #6a11cb;
        }

        .theme-input {
            width: 100%;
            padding: 14px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            margin-bottom: 15px;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .theme-input:focus {
            border-color: #6a11cb;
            box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
        }

        .theme-desc {
            width: 100%;
            padding: 14px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            margin-bottom: 15px;
            font-size: 1rem;
            resize: none;
            min-height: 120px;
            transition: all 0.3s;
        }

        .theme-desc:focus {
            border-color: #6a11cb;
            box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.1);
        }

        /* 推荐数量选择 */
        .count-selector {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .count-option {
            flex: 1;
            text-align: center;
            padding: 12px;
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            margin: 0 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .count-option:hover {
            background: #e9ecef;
        }

        .count-option.selected {
            background: #6a11cb;
            color: white;
            border-color: #6a11cb;
            box-shadow: 0 4px 10px rgba(106, 17, 203, 0.3);
        }

        /* 按钮样式 */
        .action-buttons {
            display: flex;
            gap: 15px;
        }

        .btn-primary {
            flex: 2;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(106, 17, 203, 0.4);
        }

        .btn-secondary {
            flex: 1;
            background: white;
            color: #6a11cb;
            border: 2px solid #6a11cb;
            padding: 15px;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-secondary:hover {
            background: #f0f5ff;
        }

        /* 地图区域 */
        .map-section {
            background: white;
            border-radius: 18px;
            padding: 25px;
            height: 500px; /* 固定高度 */
            box-shadow: 0 5px 15px rgba(0,0,0,0.06);
            display: flex;
            flex-direction: column;
        }

        .map-container {
            flex: 1;
            background: #eef2ff;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .map-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            font-size: 0.85rem;
            color: #666;
        }

        .legend-item {
            display: flex;
            align-items: center;
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .legend-current {
            background: #6a11cb;
        }

        .legend-shop {
            background: #ff6b6b;
        }

        /* 底部按钮 */
        .bottom-buttons {
            display: flex;
            gap: 15px;
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 800px;
            z-index: 100;
        }

        .btn-large {
            flex: 1;
            padding: 16px;
            border: none;
            border-radius: 14px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .btn-record {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
        }

        .btn-share {
            background: white;
            color: #6a11cb;
            border: 2px solid #6a11cb;
        }

        .btn-large:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

        .btn-large i {
            margin-right: 8px;
        }

        /* 新增：标签选择区域 */
        .tags-section {
            background: white;
            border-radius: 18px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.06);
        }

        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .tag {
            padding: 8px 16px;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .tag:hover {
            background: #e9ecef;
        }

        .tag.selected {
            background: #6a11cb;
            color: white;
            border-color: #6a11cb;
        }

        /* 新增：剧本封面图上传区域 */
        .cover-section {
            background: white;
            border-radius: 18px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.06);
        }

        .cover-upload {
            border: 2px dashed #e0e0e0;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 15px;
        }

        .cover-upload:hover {
            border-color: #6a11cb;
            background: #f8f9ff;
        }

        .cover-upload i {
            font-size: 3rem;
            color: #6a11cb;
            margin-bottom: 10px;
        }

        .cover-upload-text {
            color: #666;
            margin-bottom: 10px;
        }

        .cover-upload-hint {
            font-size: 0.8rem;
            color: #999;
        }

        .cover-preview {
            display: none;
            margin-top: 15px;
            text-align: center;
        }

        .cover-preview img {
            max-width: 100%;
            max-height: 200px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .cover-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: center;
        }

        .cover-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s;
        }

        .cover-change {
            background: #6a11cb;
            color: white;
        }

        .cover-remove {
            background: #f8f9fa;
            color: #666;
            border: 1px solid #e0e0e0;
        }

        /* 优化：推荐路线展示区域 */
        .recommendation-section {
            background: white;
            border-radius: 18px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.06);
            display: none;
        }

        .route-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .route-title {
            font-size: 1.4rem;
            color: #2c3e50;
            font-weight: 700;
            margin: 0;
        }

        .route-stats {
            display: flex;
            gap: 15px;
            font-size: 0.9rem;
            color: #666;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .route-steps {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .route-step {
            display: flex;
            gap: 15px;
            padding: 20px;
            background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
            border-radius: 16px;
            border-left: 4px solid #6a11cb;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .route-step:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(106, 17, 203, 0.15);
        }

        .route-step::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(106, 17, 203, 0.05) 0%, rgba(37, 117, 252, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .route-step:hover::before {
            opacity: 1;
        }

        .step-number {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.1rem;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(106, 17, 203, 0.3);
            position: relative;
            z-index: 2;
        }

        .step-content {
            flex: 1;
            position: relative;
            z-index: 2;
        }

        .step-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .step-title {
            font-weight: 700;
            font-size: 1.1rem;
            color: #2c3e50;
            margin: 0;
        }

        .step-rating {
            display: flex;
            align-items: center;
            gap: 5px;
            background: #fff3cd;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            color: #856404;
        }

        .step-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
            margin-bottom: 12px;
        }

        .detail-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: #666;
        }

        .detail-item i {
            color: #6a11cb;
            width: 16px;
        }

        .step-desc {
            color: #555;
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 10px;
            background: rgba(255, 255, 255, 0.7);
            padding: 12px;
            border-radius: 8px;
            border-left: 3px solid #6a11cb;
        }

        .step-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
        }

        .step-tag {
            background: rgba(106, 17, 203, 0.1);
            color: #6a11cb;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .route-actions {
            display: flex;
            gap: 12px;
            margin-top: 25px;
            justify-content: center;
        }

        .route-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .route-start {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
        }

        .route-start:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(106, 17, 203, 0.4);
        }

        .route-save {
            background: white;
            color: #6a11cb;
            border: 2px solid #6a11cb;
        }

        .route-save:hover {
            background: #f8f9ff;
            transform: translateY(-2px);
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }

            .left-panel, .right-panel {
                width: 100%;
            }

            .left-panel {
                flex: 1;
            }

            .right-panel {
                flex: 1;
            }

            .map-section {
                height: 400px;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            h1 {
                font-size: 1.6rem;
            }

            .subtitle {
                font-size: 0.9rem;
            }

            .count-selector {
                flex-direction: column;
                gap: 10px;
            }

            .count-option {
                margin: 0;
            }

            .action-buttons {
                flex-direction: column;
            }

            .bottom-buttons {
                flex-direction: column;
                width: 94%;
            }

            .route-step {
                flex-direction: column;
                text-align: left;
            }

            .step-number {
                align-self: flex-start;
            }

            .step-header {
                flex-direction: column;
                gap: 8px;
            }

            .step-details {
                grid-template-columns: 1fr;
            }

            .route-header {
                flex-direction: column;
                gap: 10px;
                align-items: flex-start;
            }

            .route-stats {
                align-self: stretch;
                justify-content: space-between;
            }
        }

        #shopMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 主要内容区域 - 左右布局 -->
    <div class="main-content">
        <!-- 左侧内容 - 探店主题 -->
        <div class="left-panel">
            <section class="theme-section">
                <h2 class="section-title"><i class="fas fa-pencil-alt"></i> 探店主题</h2>
                <input type="text" class="theme-input" placeholder="输入探店主题">
                <textarea class="theme-desc" placeholder="主题描述，例如：周末下午书店打卡……"></textarea>

                <h2 class="section-title"><i class="fas fa-store"></i> 推荐数量</h2>
                <div class="count-selector">
                    <div class="count-option">3家</div>
                    <div class="count-option selected">5家</div>
                    <div class="count-option">展示所有相关店铺</div>
                </div>

                <div class="action-buttons">
                    <button class="btn-primary">生成推荐路线</button>
                    <button class="btn-secondary">清空选择</button>
                </div>
            </section>

            <!-- 新增：剧本封面图上传区域 -->
            <section class="cover-section">
                <h2 class="section-title"><i class="fas fa-image"></i> 剧本封面图</h2>
                <div class="cover-upload" id="coverUpload">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <div class="cover-upload-text">点击上传封面图片</div>
                    <div class="cover-upload-hint">支持 JPG、PNG 格式，建议尺寸 800x400px</div>
                </div>
                <div class="cover-preview" id="coverPreview">
                    <img id="coverImage" src="" alt="封面预览">
                    <div class="cover-actions">
                        <button class="cover-btn cover-change" onclick="document.getElementById('coverInput').click()">更换图片</button>
                        <button class="cover-btn cover-remove" onclick="removeCover()">移除</button>
                    </div>
                </div>
                <input type="file" id="coverInput" accept="image/*" style="display: none;" onchange="handleCoverUpload(this)">
            </section>

            <!-- 新增：标签选择区域 -->
            <section class="tags-section">
                <h2 class="section-title"><i class="fas fa-tags"></i> 热门标签</h2>
                <div class="tags-container">
                    <div class="tag">咖啡店</div>
                    <div class="tag">书店</div>
                    <div class="tag selected">网红打卡</div>
                    <div class="tag">美食</div>
                    <div class="tag">文艺</div>
                    <div class="tag">休闲</div>
                    <div class="tag">购物</div>
                    <div class="tag">拍照</div>
                </div>
            </section>

            <!-- 优化：推荐路线展示区域 -->
            <section class="recommendation-section" id="recommendationSection">
                <div class="route-header">
                    <h2 class="route-title">推荐探店路线</h2>
                    <div class="route-stats">
                        <div class="stat-item">
                            <i class="fas fa-walking"></i>
                            <span>全程约2.5km</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-clock"></i>
                            <span>预计2小时</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-store"></i>
                            <span>3家店铺</span>
                        </div>
                    </div>
                </div>
                <div class="route-steps" id="routeSteps">
                    <!-- 路线步骤将通过JavaScript动态生成 -->
                </div>
                <div class="route-actions">
                    <button class="route-btn route-start">
                        <i class="fas fa-play"></i>开始探店
                    </button>
                    <button class="route-btn route-save">
                        <i class="fas fa-bookmark"></i>保存路线
                    </button>
                </div>
            </section>
        </div>

        <!-- 右侧内容 - 地图 -->
        <div class="right-panel">
            <section class="map-section">
                <h2 class="section-title"><i class="fas fa-map-marked-alt"></i> 地图</h2>
                <div class="map-container">
                    <div id="shopMap"></div>
                </div>
                <div class="map-legend">
                    <div class="legend-item">
                        <div class="legend-color legend-current"></div>
                        <span>当前位置</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color legend-shop"></div>
                        <span>推荐店铺</span>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<script src="../static/js/jquery.js"></script>
<script src="../static/js/jquery.cookie.js"></script>
<script src="../static/js/ShopExplore.js"></script>
</body>
</html>